<template>
  <a-modal class="common-modal" :title="title" :footer="null" :width="850" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <a-spin :spinning="confirmLoading">
      <a-form :model="formState" @validateFields="handleOk" ref="formRef" layout="vertical" class="common-modal-content">

            <!--            <div class='blue-line mb-20'> </div>-->
            <a-row>
              <a-col :span="24">
                <a-form-item :label="$t('deviceManage.waterLineNo')" name="rodNo" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <span>{{ formState.lineNo }}</span>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :label="$t('other.pushId')" name="id" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input-number v-model:value="formState.id" disabled :placeholder="$t('deviceManage.autoGenerate')" />
                </a-form-item>
              </a-col>
              <a-col :span="12" style="display: none">
                <a-form-item :label="$t('deviceManage.waterLineNo')" name="hangerLineId" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input-number v-model:value="formState.hangerLineId" :disabled="props.isView" :placeholder="$t('deviceManage.autoGenerate')" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :label="$t('other.returnLever')" name="rodNo" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true,validator: is_zero, msg1: $t('other.pleaseInputInt'), msg2: $t('other.pleaseInputReturnLever')}]">
                  <a-input v-model:value.trim="formState.rodNo" min={0} :disabled="props.isView" :placeholder="$t('other.pleaseInputReturnLever')" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :label="$t('other.serialPort')" name="serialPort" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, message: $t('other.pleaseSelectSerialPort') }]">
                  <a-select v-model:value="formState.serialPort" :disabled="props.isView" allowClear :options="selectOptions.portArray" :placeholder="$t('common.pleaseSelect')"></a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :label="$t('other.pushSpace')+'(mm)'" name="rodDistance" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, validator: is_zero, msg1: $t('other.pleaseInputInt'), msg2: $t('other.pleaseInputPushSpace') }]">
                  <a-input-number v-model:value="formState.rodDistance" :disabled="props.isView" :placeholder="$t('other.pleaseInputPushSpace')" @change="countSpeed()" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :label="$t('other.timeInterval')" name="timeInterval" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, validator: is_zero, msg1: $t('other.pleaseInputInt'), msg2: $t('other.pleaseInputTimeInterval') }]">
                  <a-input-number :min="0" v-model:value="formState.timeInterval" :disabled="props.isView" :placeholder="$t('other.pleaseInputTimeInterval')" @change="countSpeed()" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :label="$t('other.timeUp')+'(ms)'" name="maxInterval" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true,validator: is_zero, msg1: $t('other.pleaseInputInt'), msg2: $t('other.pleaseInputIntervalUp') }]">
                  <a-input-number :min="0" v-model:value="formState.maxInterval" :disabled="props.isView" :placeholder="$t('other.pleaseInputIntervalUp')" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :label="$t('other.timeDown')+'(ms)'" name="minInterval" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, validator: is_zero, msg1: $t('other.pleaseInputInt'), msg2: $t('other.pleaseInputIntervalDown') }]">
                  <a-input-number :min="0" v-model:value="formState.minInterval" :disabled="props.isView" :placeholder="$t('other.pleaseInputIntervalDown')" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :label="$t('other.chainSpeed')+'(m/s)'" name="chainSpeed" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true }]">
                  <a-input-number :min="0" :step="0.01" v-model:value="formState.chainSpeed" disabled value="33" :placeholder="$t('other.SystemCalculation')" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :label="$t('other.antiTime')+'(ms)'" name="antijitterTime" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, validator: is_zero, msg1: $t('other.pleaseInputInt'), msg2: $t('other.pleaseInputAntiTime')  }]">
                  <a-input-number :min="0" v-model:value="formState.antijitterTime" :disabled="props.isView" :placeholder="$t('other.pleaseInputAntiTime')" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :label="$t('other.sensorTimeout')+'(ms)'" name="sensorTimeout" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, validator: is_zero, msg1: $t('other.pleaseInputInt'), msg2: $t('other.pleaseInputSensorTime')  }]">
                  <a-input-number :min="0" v-model:value="formState.sensorTimeout" :disabled="props.isView" :placeholder="$t('other.pleaseInputSensorTime')" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :label="$t('other.durationTime')+'(ms)'" name="inStationTime" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, validator: is_zero, msg1: $t('other.pleaseInputInt'), msg2: $t('other.pleaseInputDurationTime')}]">
                  <a-input-number :min="0" v-model:value="formState.inStationTime" :disabled="props.isView" :placeholder="$t('other.pleaseInputDurationTime')" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :label="$t('other.outputTime')+'(ms)'" name="outStationTime" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, validator: is_zero, msg1: $t('other.pleaseInputInt'), msg2: $t('other.pleaseInputOutputTime') }]">
                  <a-input-number :min="0" v-model:value="formState.outStationTime" :disabled="props.isView" :placeholder="$t('other.pleaseInputOutputTime')" />
                </a-form-item>
              </a-col>

            </a-row>


      </a-form>
      <div class="common-modal-footer">
        <a-button @click="handleCancel" class="cancel">{{ $t('common.cancel') }}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm" v-if="!isLocal">{{ $t('common.ok') }}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script setup name="pushDialog">
import { nextTick, ref } from 'vue'
import axios from '@/utils/request'
import { cloneDeep } from 'lodash'
import { message } from 'ant-design-vue'
import i18n from '@/locales/index'

const { t } = i18n.global
const emits = defineEmits(['ok'])
let props = defineProps({
  isView: {
    type: Boolean,
    default: () => false
  }
})
const labelCol = {  span: 23 }
const wrapperCol = { span: 23 }
let title = ref('')
let visible = ref(false)
let isEdit = ref(false)
let confirmLoading = ref(false)
const selectOptions = ref({})
let formState = ref({})
const formRef = ref()
let partNameList = ref([])
let fileList = ref([])
const isLocal = process.env.VUE_APP_CONFIG == 'local'
const edit = async (record, editable) => {
  initModalData(record, editable)
  await nextTick()
  formRef.value.resetFields()
  const dRecord = cloneDeep(record)
  // 查询推杆配置 
  if (record.pushRodId) {
    const res = await axios.getAction('/api/device/hanger-line-push-rod/get', { id: record.pushRodId })
    if (res.success) {
      if (res.data != null) {
        record = res.data
      }
    }
  } else {
    record.antijitterTime = 300
    record.inStationTime = 2000
    record.chainSpeed = 0.215
    record.lineNo = 32
    record.maxInterval = 2400
    record.minInterval = 1800
    record.outStationTime = 1000
    record.rodDistance = 444
    record.rodNo = 1
    record.sensorTimeout = 1900
    record.serialPort = "COM1"
    record.timeInterval = 2063
  }
  record.hangerLineId = dRecord.id
  record.lineNo = dRecord.lineNo
  record.id = dRecord.pushRodId
  // console.log(record);
  formState.value = cloneDeep(record)
}
// 链条速度(m/s)(推杆间距/时间间隔)
function countSpeed () {
  if (cloneDeep(formState.value.timeInterval) + 0 > 0) {
    formState.value.chainSpeed = (cloneDeep(formState.value.rodDistance) + 0) / (cloneDeep(formState.value.timeInterval) + 0)
  } else {
    formState.value.chainSpeed = 0
  }
  // console.log('链条速度', formState)
}

const is_zero = (rule, value) => {
  const { msg1, msg2 } = rule
  if (!value) return Promise.reject(msg2)
  if (/^\d+$/.test(value)) return Promise.resolve()
  return Promise.reject(msg1)
}

const initModalData = (record, editable) => {
  title.value = t('deviceManage.puttSetting')
  visible.value = true
  isEdit.value = editable
}

const queryParams = (value) => {
  const params = cloneDeep(value)
  // params.id = recordInfo.value.id
  params.productPartNameList = partNameList.value.filter(item => item.name).map(item => item.name)
  return params
}
const handleOk = async () => {
  try {
    const values = await formRef.value.validateFields()
    confirmLoading.value = true
    const res = await axios.postAction('/api/device/hanger-line-push-rod/save', queryParams(values))
    if (res.success) {
      message.success(this.$t('common.doSuccess'))
      emits('ok')
      confirmLoading.value = false
      visible.value = false
    }
  } catch (err) {
    console.log('0000000', err)
  }
  confirmLoading.value = false
}
const handleCancel = () => {
  visible.value = false
  initModalStatus()
}
const initModalStatus = () => {
  confirmLoading.value = false
  formState.value = {}
  formRef.value.resetFields()
  fileList.value = []
}

const initSelectOptions = (obj) => {
  selectOptions.value = obj
}
defineExpose({
  edit,
  initSelectOptions
})

</script>
